/*
 * @Author: yxfan
 * @Date: 2021-12-04 11:32:06
 * @LastEditTime: 2023-11-04 15:52:41
 * @FilePath: /umi-demo/src/pages/demo/DragPic/index.js
 * @Description:
 */
import React, { useState, useRef, useEffect } from 'react';
import { Button } from 'antd';
import './index.less';

const DragPic = (props) => {
    const img = useRef();
    const step = useRef(1);
    const imgContainer = useRef();
    const imgOffsetX = useRef(0);
    const imgOffsetY = useRef(0);
    const isMouseDown = useRef(false);
    const [scale, setScale] = useState(1);

    useEffect(() => {
        imgContainer.current.addEventListener('mousewheel', mousewheel);
        document.addEventListener('mouseup', mouseup);
        img.current.addEventListener('mousemove', mousemove);
        return () => {
            imgContainer.current?.removeEventListener('mousewheel', mousewheel);
            document?.removeEventListener('mouseup', mouseup);
            img.current?.removeEventListener('mousemove', mousemove);
        };
    }, []);

    const mousewheel = (e) => {
        const { wheelDelta } = e;
        console.log('~~~~', wheelDelta);
        if (wheelDelta > 0) {
            step.current += 0.5;
            setScale(step.current);
        } else {
            step.current -= 0.5;
            if (step.current <= 0) {
                step.current = 0;
                return;
            }
            setScale(step.current);
        }
    };

    const mousedown = (e) => {
        e.preventDefault();
        // 获取事件对象
        var e_down = e || window.event;

        //  计算鼠标点击的位置 和 目标元素之间 的偏移量
        imgOffsetX.current = e_down.clientX - e_down.target.offsetLeft;
        imgOffsetY.current = e_down.clientY - e_down.target.offsetTop;
        isMouseDown.current = true;
    };

    const mousemove = (e) => {
        if (isMouseDown.current) {
            var e_move = e || window.event;
            const left_ = e_move.clientX - imgOffsetX.current;
            const top_ = e_move.clientY - imgOffsetY.current;

            img.current.style.left = left_ + 'px';
            img.current.style.top = top_ + 'px';
        }
    };

    const mouseup = (e) => {
        isMouseDown.current = false;
    };

    const imgReset = () => {
        img.current.style.left = '0px';
        img.current.style.top = '0px';
        if (scale != 1) {
            step.current = 1;
            setScale(1);
        }
    };
    return (
        <div className="drag-pic">
            <h1>拖拽图片</h1>
            <div ref={imgContainer} className="pic-container">
                <img
                    draggable="true"
                    ref={img}
                    onMouseDown={mousedown}
                    style={{ transform: `scale(${scale})` }}
                    src="https://th.bing.com/th/id/R188072c0d06dac23188c16429cd9c89f?rik=1j4eHV0ak3IIHA&riu=http%3a%2f%2fwww.liangjiang.gov.cn%2fPhotos%2f2020-09%2f09%2f10065121_65515d92-4dcc-43d6-979f-599ec186d49f.jpg&ehk=UrtpGPZ1wv%2f6Ivnhrwt73dYhHEQsV9DXMtQT7Bs5ry8%3d&risl=&pid=ImgRaw"
                />
            </div>
            <Button onClick={imgReset}>还原</Button>
        </div>
    );
};
export default DragPic;
